{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '常用插件:example/plugin/index', '时间段选择器'])}

<style>
    [data-theme='dark'] .daterangepicker {
        border-color: transparent;
        background-color: #292F39;
    }
    [data-theme|='translucent'] .daterangepicker {
        background-color: rgba(var(--bs-white-rgb), .2);
        backdrop-filter: blur(10px);
        border-color: transparent;
    }
    [data-theme='dark'] .daterangepicker .calendar-table,
    [data-theme|='translucent'] .daterangepicker .calendar-table {
        background-color: transparent;
        border-color: transparent;
    }
    [data-theme='dark'] .daterangepicker td.off,
    [data-theme='dark'] .daterangepicker td.off.in-range,
    [data-theme='dark'] .daterangepicker td.off.start-date,
    [data-theme='dark'] .daterangepicker td.off.end-date,
    [data-theme|='translucent'] .daterangepicker td.off,
    [data-theme|='translucent'] .daterangepicker td.off.in-range,
    [data-theme|='translucent'] .daterangepicker td.off.start-date,
    [data-theme|='translucent'] .daterangepicker td.off.end-date {
        background-color: transparent;
        color: var(--bs-gray);
    }
    [data-theme='dark'] .daterangepicker td.available:hover,
    [data-theme='dark'] .daterangepicker th.available:hover,
    [data-theme|='translucent'] .daterangepicker td.available:hover,
    [data-theme|='translucent'] .daterangepicker th.available:hover {
        background-color: rgba(var(--bs-white-rgb), .375);
    }
    [data-theme='dark'] .daterangepicker .drp-buttons,
    [data-theme|='translucent'] .daterangepicker .drp-buttons {
        border-color: rgba(var(--bs-white-rgb), .2);
    }
    [data-theme='dark'] .daterangepicker:before,
    [data-theme|='translucent'] .daterangepicker:before {
        border-color: transparent;
    }
    [data-theme='dark'] .daterangepicker:after {
        border-bottom-color: #292F39;
    }
    [data-theme|='translucent'] .daterangepicker:after {
        border-bottom-color: rgba(var(--bs-white-rgb), .2);
        top: -7px;
    }
    [data-theme='dark'] .daterangepicker .calendar-table .next span,
    [data-theme='dark'] .daterangepicker .calendar-table .prev span,
    [data-theme|='translucent'] .daterangepicker .calendar-table .next span,
    [data-theme|='translucent'] .daterangepicker .calendar-table .prev span {
        border-color: rgba(var(--bs-white-rgb), .5);
    }
    [data-theme='dark'] select.monthselect,
    [data-theme='dark'] select.yearselect,
    [data-theme='dark'] select.hourselect,
    [data-theme='dark'] select.minuteselect,
    [data-theme='dark'] select.ampmselect,
    [data-theme|='translucent'] select.monthselect,
    [data-theme|='translucent'] select.yearselect,
    [data-theme|='translucent'] select.hourselect,
    [data-theme|='translucent'] select.minuteselect,
    [data-theme|='translucent'] select.ampmselect {
        border-color: rgba(var(--bs-white-rgb), .2);
        background-color: transparent;
        color: inherit;
    }
    [data-theme='dark'] .daterangepicker .ranges li:hover,
    [data-theme|='translucent'] .daterangepicker .ranges li:hover {
      background-color: rgba(var(--bs-white-rgb), .375);
    }
    </style>



<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">时间段选择器Date Range Picker</div>
        </header>
        <div class="card-body">
        
        <p>这里使用的是3.0.5，官方地址：<a href="http://www.daterangepicker.com/" target="_blank">http://www.daterangepicker.com/</a></p>
          <div class="mb-3">
          <label for="dates" class="form-label">默认使用</label>
          <input type="text" id="dates" class="form-control" />
        </div>
        <div class="mb-3">
          <label for="daterange" class="form-label">带回调的简单日期范围选择器</label>
          <p class="text-muted">可到控制台查看回调的输出情况。</p>
          <input type="text" name="daterange" id="daterange" class="form-control" />
        </div>
        <div class="mb-3">
          <label for="datetimes" class="form-label">日期范围选择器与时间</label>
          <input type="text" name="datetimes" id="datetimes" class="form-control" />
        </div>
        <div class="mb-3">
          <label for="birthday" class="form-label">单日期选择器</label>
          <input type="text" name="birthday" id="birthday" class="form-control" />
        </div>
        <div class="mb-3">
          <label for="reportrange" class="form-label">预定义的日期范围</label>
          <div class="input-group">
            <input type="text" id="reportrange" class="form-control" value="" />
            <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
          </div>
        </div>
        <div class="mb-3">
          <label>输入最初为空</label>
          <input type="text" name="datefilter" class="form-control"  />
        </div>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    $(function(){
          // 入门使用
          $('#dates').daterangepicker({ 
            startDate: moment(), 
            endDate: moment().add(2, 'day')
        });
        // 带回调的处理
        $('input[name="daterange"]').daterangepicker({
            opens: 'left'
        }, function(start, end, label) {
            console.log("您选择的时间段是：" + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
        });
        
        // 日期范围选择器与时间
        $('input[name="datetimes"]').daterangepicker({
            timePicker: true,
            startDate: moment().startOf('hour'),
            endDate: moment().startOf('hour').add(32, 'hour'),
            locale: {
                format: 'M/DD hh:mm A'
            }
        });
        
        // 单日期选择器
        $('input[name="birthday"]').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 1901,
            maxYear: parseInt(moment().format('YYYY'),10)
        }, function(start, end, label) {
            var years = moment().diff(start, 'years');
            alert("您已经 " + years + " 岁了。");
        });
        
        // 预定义的日期范围
        var start = moment().subtract(29, 'days');
        var end = moment();
        
        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }
        
        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
               '今天': [moment(), moment()],
               '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
               '七天前': [moment().subtract(6, 'days'), moment()],
               '30天前': [moment().subtract(29, 'days'), moment()],
               '当前月': [moment().startOf('month'), moment().endOf('month')],
               '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);
        
        cb(start, end);
        
        // 输入最初为空
        $('input[name="datefilter"]').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: '清空'
            }
        });
    
        $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
        });
    
        $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });

    </script>